<template lang="pug">
  Card.deploy-con
    .deploy-header
      span(v-for="(item, index) in items",v-if="$route.meta[item.name]",:class="{'deploy-active':deployIndex===index}",:key="index",@click='handleDeployType(index)').deploy-item {{item.name}}
    Table(:loading='loading',:columns='columns',:data='deployData')
</template>

<script>
import createAPI from '@/plugins/axios'
import showTable from '@/components/show-table/show-table'

export default {
  name: 'Deploy',
  components: { showTable },
  data() {
    return {
      deployIndex: 0,
      items: [],
      deployData: [],
      loading: false,
      defaultColumns: [
        { title: 'ID', width: 50, align: 'center', key: 'ruleId' },
        {
          title: '监控类型',
          align: 'center',
          render: (h, params) => {
            const createElement = (value, queryUrl, modifyUrl) => {
              if (this.$route.meta[`${value}规则配置`][`/config_centor/${queryUrl}`] && params.row.status === '1') {
                const queryData = {
                  ruleId: params.row.ruleId,
                  queryUrl,
                  modifyUrl,
                  deployType: value,
                  deployIndex: this.deployIndex
                }
                return h('router-link', { attrs: { to: { name: 'deploy_setting', query: queryData } } }, value)
              } else {
                return h('span', value)
              }
            }
            switch (params.row.monitorType) {
              case '1':
                return createElement('异常监控', 'get_monitor_by_ruleId_exception', 'update_monitor_rule_exception')
              case '2':
                return createElement('性能监控', 'get_monitor_by_ruleId_performance', 'update_monitor_rule_performance')
              case '3':
                return createElement('日志监控', 'get_monitor_by_ruleId_log', 'update_monitor_rule_log')
              case '4':
                return createElement('数据质量监控', 'get_monitor_by_ruleId_data', 'update_monitor_rule_data')
            }
          }
        },
        { title: '监控名称', align: 'center', key: 'monitorName' },
        { title: '修改人', align: 'center', key: 'revisePerson' },
        { title: '修改时间', align: 'center', key: 'reviseTime' },
        {
          title: '绑定用户',
          align: 'center',
          render: (h, params) => {
            function createElementContent() {
              if (params.row.user) {
                return params.row.user.map(item => {
                  return h('span', { style: { margin: '5px' } }, item.userName)
                })
              } else {
                return ''
              }
            }
            return h('div', createElementContent())
          }
        }
      ],
      operateColumns: [
        {
          title: '操作',
          align: 'center',
          render: (h, params) => {
            return h(
              'span',
              {
                attrs: { type: 'primary' },
                style: { color: '#2077FF', cursor: 'pointer' },
                on: {
                  click: () => {
                    this.handleUpdateStatus(params)
                  }
                }
              },
              params.row.status === '0' ? '停止' : '启用'
            )
          }
        }
      ],
      columns: []
    }
  },
  mounted() {
    Object.keys(this.$route.meta).forEach(item => {
      let opt = {}
      if (item === '数据质量监控规则配置') opt = Object.assign({ name: item }, { value: 'get_monitor_rules_data', update: 'update_monitor_rules_status_data' })
      if (item === '性能监控规则配置') opt = Object.assign({ name: item }, { value: 'get_monitor_rules_performance', update: 'update_monitor_rules_status_performance' })
      if (item === '异常监控规则配置') opt = Object.assign({ name: item }, { value: 'get_monitor_rules_exception', update: 'update_monitor_rules_status_exception' })
      if (item === '日志监控规则配置') opt = Object.assign({ name: item }, { value: 'get_monitor_rules_log', update: 'update_monitor_rules_status_log' })
      this.items.push(opt)
    })
    if (Object.keys(Object.values(this.$route.meta)[0]).some(item => item === `/config_centor/${this.items[0].update}`)) {
      this.columns = [...this.defaultColumns, ...this.operateColumns]
    } else {
      this.columns = this.defaultColumns
    }
    if (!this.$route.query.deployIndex) {
      this.handleTableData(this.items[0].value)
    } else {
      this.deployIndex = Number(this.$route.query.deployIndex)
      this.handleTableData(this.items[this.$route.query.deployIndex].value)
    }
  },
  methods: {
    handleTableData: async function(tabUrl) {
      try {
        this.loading = true
        this.deployData = []
        this.deployData = (await createAPI(`config_centor/${tabUrl}`, 'post', { data: {} })).data.data.result
        this.loading = false
      } catch (error) {
        this.loading = false
      }
    },
    handleDeployType(itemSub) {
      this.deployIndex = itemSub
      this.items.forEach(item => {
        if (this.$route.meta[item.name] && this.$route.meta[item.name]['/config_centor/' + item.update]) {
          this.columns = [...this.defaultColumns, ...this.operateColumns]
        } else {
          this.columns = this.defaultColumns
        }
      })
      this.handleTableData(this.items[itemSub].value)
    },
    handleUpdateStatus: async function(params) {
      try {
        await createAPI(`config_centor/${this.items[this.deployIndex].update}`, 'post', { data: { ruleId: params.row.ruleId } })
        params.row.status === '0' ? (params.row.status = '1') : (params.row.status = '0')
        this.$Message.success('操作修改成功')
      } catch (error) {
        this.$Message.success('操作修改失败')
      }
    }
  }
}
</script>

<style lang="scss">
@import './index.scss';
</style>
